<template>
	<el-container direction="vertical">
		<SearchForm :columns="formColumn" @search="search" @reset="search" />
		<el-header>
			<div class="left-panel">
				<el-button
					type="primary"
					icon="el-icon-plus"
					@click="drawer.show_add = true"
					class="mr10"
				>
					添加课程
				</el-button>
				<!-- <el-button class="mr10">下载课程模板</el-button>
				<scFileImport ref="scFileImport" class="mr10" :apiObj="importExcel.apiObj" :templateUrl="importExcel.templateUrl">
					<template #default="{ open }">
						<el-button @click="open">
							导入课程
						</el-button>
					</template>
				</scFileImport> -->
			</div>
		</el-header>
		<AddClass
			v-if="drawer.show_add"
			@close="addCourseClose"
			@success="search"
		/>
		<addClass
			v-if="drawer.show_add2"
			@close="drawer.show_add2 = false"
			ref="addClassRef"
		/>
		<el-main class="nopadding">
			<scTable
				ref="table"
				v-bind="list"
				row-key="id"
				:setUpType="false"
				stripe
			>
				<!-- <el-table-column type="selection" width="50"></el-table-column> -->
				<template #name="scope">
					<el-link
						:underline="false"
						type="primary"
						:href="`#/student/detail/${scope.row.studentId}`"
						>{{ scope.row.name }}</el-link
					>
				</template>
				<template #state="scope">
					{{ scope.row.state == 0 ? "停用" : "启用" }}
				</template>
				<el-table-column
					label="操作"
					width="210"
					fixed="right"
					align="center"
				>
					<template #default="scope">
						<div>
							<el-button
								class="mtb5"
								type="primary"
								plain
								size="small"
								@click="addClass(scope.row)"
								>添加班级</el-button
							>
							<el-button
								class="mtb5"
								type="primary"
								plain
								size="small"
								@click="viewOutline(scope.row)"
								>查看大纲</el-button
							>
						</div>
						<div>
							<el-button
								class="mtb5"
								plain
								size="small"
								@click="editDetail(scope.row)"
								>编辑</el-button
							>
							<el-button
								class="mtb5"
								plain
								size="small"
								@click="stopUsing(scope.row)"
								>{{
									scope.row.state == 0
										? "启用"
										: "停用"
								}}</el-button
							>
							<!-- <el-button class="mtb5" type="danger" plain size="small" @click="deleteDetail(scope.row)">删除</el-button> -->
						</div>
					</template>
				</el-table-column>
			</scTable>
		</el-main>

		<ViewOutline ref="ViewOutlineRef" :viewType="'course'" />
	</el-container>
</template>
<script>
import { computed } from "vue";
import AddClass from "./addCourse/index.vue";
import SearchForm from "@/components/SearchForm/index.vue";
import scFileImport from "@/components/scFileImport";
import { formColumn, column } from "./date";
import { ElMessageBox, ElMessage } from "element-plus";
import addClass from "./addClass/index.vue";
import ViewOutline from "./../components/viewOutline.vue";

export default {
	data() {
		return {
			formColumn,
			list: {
				apiObj: this.$API.course.list,
				params: {},
				column,
			},
			drawer: {
				show_add: false,
				show_add2: false,
			},
			importExcel: {
				templateUrl:
					"https://binaries.templates.cdn.office.net/support/templates/zh-cn/tf45048037_win32.xltm",
				apiObj: {
					post: () => Promise.resolve([]),
				},
			},
			times: 1,
			courseId: null,
		};
	},
	provide() {
		return {
			times: computed(() => this.times),
			courseId: computed(() => this.courseId),
		};
	},
	components: {
		SearchForm,
		AddClass,
		scFileImport,
		addClass,
		ViewOutline,
	},
	methods: {
		importStundentsExcel() {
			this.$refs.scFileImport.open();
		},
		addClass(row) {
			this.courseId = row.id;
			this.drawer.show_add2 = true;
			this.times = row.times;
		},
		addCourseClose() {
			this.drawer.show_add = false;
			this.$refs.table.getData();
		},
		search(searchParams) {
			let params = {}
			if(searchParams) {
				const searchObj = JSON.parse(JSON.stringify(searchParams))
				params =  Object.assign({}, searchObj, this.list.params)
			}else{
				params = Object.assign({}, this.list.params, {});
			}
			this.$refs.table.reload(params);
		},
		addStudent() {
			this.visible = true;
		},
		editDetail(row) {
			console.log(row, "我是编辑");
			this.$router.push({
				path: `/teach/editCourse/${row.id}`,
			});
		},
		copyDetail(row) {
			console.log(row, "我是复制");
			this.$router.push({
				path: "/teach/editCourse",
			});
		},
		stopUsing(row) {
			console.log(row, "我是停用");
			ElMessageBox.confirm(`确定要${row.state == 0 ? '启用' : '停用'}该课程?`, "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
				buttonSize: "default",
			}).then(() => {
				console.log(row.state, 11111);
					const params = {
						id: row.id,
       			state: row.state == 0 ? 1 : 0
					}
					this.$API.course.modifyState.get(params).then((res) => {
						ElMessage({
							type: res.code == 200 ?  "success" : "error",
							message: res.code == 200 ? res.msg : res.message,
						});
						this.$refs.table.getData();
					})
				})
				.catch(() => {});
		},
		deleteDetail(row) {
			console.log(row, "我是删除");
			ElMessageBox.confirm("确定要删除该课程?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
				buttonSize: "default",
			})
				.then(() => {
					this.$API.course.delete
						.post({ ids: row.id })
						.then((res) => {
							this.$refs.table.getData();
							ElMessage({
								type: res.code == 200 ?  "success" : "error",
								message: res.code == 200 ? res.msg : res.message,
							});
						});
				})
				.catch(() => {});
		},
		// 查看大纲
		viewOutline(row) {
			this.$refs.ViewOutlineRef.openDialog(row);
		},
	},
};
</script>
<style lang="scss" scoped>
.mr10 {
	margin-right: 10px;
}

.mtb5 {
	margin-top: 5px;
	margin-bottom: 5px;
}
</style>
